<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:h="http://java.sun.com/jsf/html">
    <p:blockUI block=":frmDetalleUsuario:panelUsuario"  widgetVar="blkDetaPanelUsuario">
        Espere mientras se procesan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <h:form id="frmDetalleUsuario" onkeypress="if (event.keyCode == 13) return false;">
        <p:panel id="panelUsuario">
            <table style="border-spacing: 5px;width: 100%" >
                <tbody>
                    <tr>
                        <td>
                            <h:outputLabel value="Tipo de Usuario:" />
                        </td>
                        <td>
                            <p:selectOneMenu id="cboTipUsuario" style="width: 305px;" 
                                             value="#{usuarioController.bean.tipUsuario}" disabled="#{!usuarioController.esNuevo or usuarioController.esNuevoExterno}"
                                             valueChangeListener="#{usuarioController.cambiaCodigoUsuarioPorTipo}">
                                <f:selectItem itemValue="-1" itemLabel="Seleccione"></f:selectItem>
                                <f:selectItems value="#{usuarioController.lstTipoUsuario}" 
                                               var="tipousuario" 
                                               itemValue="#{tipousuario.txtValor}" 
                                               itemLabel="#{tipousuario.txtParametro}"/>
                                <p:ajax event="change" update=":frmDetalleUsuario:txtCodUsuario, :frmDetalleUsuario:txtPersonaNombres,
                                        :frmDetalleUsuario:txtPersonaApepaterno, :frmDetalleUsuario:txtPersonaApematerno,
                                        :frmDetalleUsuario:pnlCadClave, :frmDetalleUsuario:btnBuscaUnidadTerritorial, :frmDetalleUsuario:txtCorreo1"/>
                            </p:selectOneMenu>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 170px;">
                            <h:outputLabel value="Documento (DNI, otros):" />
                        </td>
                        <td>
                            <p:inputText  value="#{usuarioController.bean.codDni}" 
                                          id="txtPersonaDNI" readonly="#{!usuarioController.esNuevo}"
                                          style="width: 100px" maxlength="12" >
                                <pe:keyFilter regEx="/[0-9]/" />
                                <p:ajax event="blur" process="@this, :frmDetalleUsuario:cboTipUsuario" listener="#{usuarioController.cambiaCodigoUsuarioPorTipoSinEvento()}" update=":frmDetalleUsuario:txtCodUsuario, :frmDetalleUsuario:txtCorreo1"/>
                            </p:inputText>
                            <p:commandButton icon="ui-icon-search" 
                                             actionListener="#{usuarioController.limpiarBusquedaPersonal}"
                                             update=":frmListarPersonal:txtDNI,:frmListarPersonal:txtApeNom,:frmListarPersonal:grdListadoPersonal" 
                                             oncomplete="buscaPersonal.show()"
                                             process="txtPersonaDNI, @this">
                            </p:commandButton>
                        </td>
                    </tr>
                    <tr>
                         <td>
                            <h:outputLabel value="Código de Usuario:" />
                        </td>
                        <td>
                            <p:inputText id="txtCodUsuario" value="#{usuarioController.bean.codUsuario}" 
                                          style="width: 300px; text-transform: uppercase;" maxlength="20" readonly="#{!usuarioController.esNuevo}"> 
                                <pe:keyFilter regEx="/[A-Z_Ñ0-9.-_]/i"/>
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                         <td>
                            <h:outputLabel value="Nombres:" />
                        </td>
                        <td>
                            <p:inputText  value="#{usuarioController.bean.txtNombres}" 
                                          id="txtPersonaNombres" readonly="#{usuarioController.bean.tipUsuario == '1' or usuarioController.bean.nidPersonal != null}"
                                          style="width: 300px;text-transform: uppercase;" maxlength="60"  >
                                <pe:keyFilter regEx="/[A-Z_Ñ ]/i"/>
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                         <td>
                            <h:outputLabel value="Apellido Paterno:" />
                        </td>
                        <td>
                            <p:inputText  value="#{usuarioController.bean.txtApellidoPaterno}" 
                                          id="txtPersonaApepaterno" readonly="#{usuarioController.bean.tipUsuario == '1' or usuarioController.bean.nidPersonal != null}"
                                          style="width: 300px;text-transform: uppercase;" maxlength="40" >
                                <pe:keyFilter regEx="/[A-Z_Ñ ]/i"/>
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                         <td>
                            <h:outputLabel value="Apellido Materno:" />
                        </td>
                        <td>
                            <p:inputText  value="#{usuarioController.bean.txtApellidoMaterno}" 
                                          id="txtPersonaApematerno" readonly="#{usuarioController.bean.tipUsuario == '1' or usuarioController.bean.nidPersonal != null}"
                                          style="width: 300px;text-transform: uppercase;" maxlength="40" >
                                <pe:keyFilter regEx="/[A-Z_Ñ ]/i"/>
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h:outputLabel value="Unidad Territorial:" />
                        </td>
                        <td>
                            <p:inputText id="txtDetalleUnidadTerritorial" 
                                         value="#{(usuarioController.selectedZonalUsuario.txtZonal!=null?usuarioController.selectedZonalUsuario.txtZonal:'')}" 
                                         style="width: 270px" readonly="true">
                            </p:inputText>
                            <p:commandButton id="btnBuscaUnidadTerritorial" icon="ui-icon-search" disabled="#{usuarioController.bean.tipUsuario == '1'}"
                                             onclick="buscaUnidadTerritorialUsuario.show()"
                                             actionListener="#{usuarioController.limpiarBusquedaUnidadTerritorial}"
                                             update=":frmListarUnidadTerritorial:txtUnidadTerritorial,:frmListarUnidadTerritorial:grdListadoZonal" 
                                             process="@this">
                            </p:commandButton>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr />
                        </td>
                    </tr>               
                    <tr>
                        <td>
                            <h:outputLabel value="Correo Electronico 1:" />
                        </td>
                        <td>
                            <p:inputText id="txtCorreo1" value="#{usuarioController.bean.txtCorreoElectronico1}" 
                                         style="width: 300px; text-transform: lowercase;" maxlength="100"  >
                                <pe:keyFilter regEx="/[A-Z_Ñ0-9.-_]/i"/>
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h:outputLabel value="Correo Electronico 2:" />
                        </td>
                        <td>
                            <p:inputText value="#{usuarioController.bean.txtCorreoElectronico2}" 
                                         style="width: 300px; text-transform: lowercase;" maxlength="100" >
                                <pe:keyFilter regEx="/[A-Z_Ñ0-9.-_]/i"/>
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <h:panelGrid columns="3" style="width: 350px;" id="pnlCadClave">
                            <p:selectBooleanCheckbox value="#{usuarioController.BCaducidadClave}" rendered="#{usuarioController.bean.tipUsuario != '1'}">
                                <p:ajax update=":frmDetalleUsuario:txtFechaExpiracion" oncomplete="habMask();"/>  
                            </p:selectBooleanCheckbox>
                            <h:outputLabel  value="   Fecha de Expiración de la Contraseña:  " rendered="#{usuarioController.bean.tipUsuario != '1'}"/>
                            <p:calendar id="txtFechaExpiracion" value="#{usuarioController.bean.fecCambioClave}" 
                                        disabled="#{(usuarioController.BCaducidadClave)?false:true}" showOn="button" 
                                        pattern="dd/MM/yyyy" size="10" rendered="#{usuarioController.bean.tipUsuario != '1'}"/> 
                            </h:panelGrid>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p:selectBooleanCheckbox value="#{usuarioController.BBloqueado}" itemLabel="Bloqueado" rendered="#{usuarioController.bean.flgBloqueado =='1'}">
                                <p:ajax update="panelUsuarioObs" listener="#{usuarioController.muestraObservacion}" process="@this"/> 
                            </p:selectBooleanCheckbox>
                        </td>
                        <td>
                            <p:selectBooleanCheckbox value="#{usuarioController.BActivo}" itemLabel="Activo" disabled="#{usuarioController.esNuevo}" >
                                <p:ajax update="panelUsuarioObs" listener="#{usuarioController.muestraObservacionActivo}" process="@this"/> 
                            </p:selectBooleanCheckbox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        <h:panelGrid id="panelUsuarioObs" style="width: 470px;" columns="2" >
                            <h:outputLabel value="Observación :" rendered="#{usuarioController.BMuestraObs}" style="margin-right: 80px;"/>
                            <p:inputTextarea id="obsModulo" counter="counter" maxlength="250" counterTemplate="{0} caracteres restantes." 
                                style="overflow-y:auto;width: 250px;height: 50px;font-size: 11px;"
                                rendered="#{usuarioController.BMuestraObs}" value="#{usuarioController.bean.txtObservacion}"/> 
                            <br/>
                            <h:outputText id="counter" />  
                        </h:panelGrid>
                        </td>
                    </tr>
                </tbody>   
                <tfoot>
                    <tr>
                        <td colspan="2">
                            <p:toolbar style="padding: 3px;">
                                <p:toolbarGroup align="right">
                                    <p:commandButton style="margin-right: 40px;" value="Grabar" icon="ui-icon-disk" process=":frmDetalleUsuario"
                                                     actionListener="#{usuarioController.saveDetalleUsuario}" update=":frmGestionarUsuario:msjFiltro"
                                                     onstart="blkDetaPanelUsuario.show()" oncomplete="blkDetaPanelUsuario.hide()"/>
                                    <p:commandButton process="@this" 
                                                     update=":frmGestionarUsuario, :frmGestionarUsuario:msjFiltro" 
                                                     value="Cerrar" icon="ui-icon-close" 
                                                     onclick="editarContenidoUsuarios.hide()"/>
                                </p:toolbarGroup>
                            </p:toolbar>
                        </td>
                    </tr>
                </tfoot>
            </table>  
        </p:panel>
    </h:form>
</ui:composition>
